<template>
  <div>
    <el-dialog title="校友信息" :visible.sync="dialogFormVisible"  :loading="loading" width="800px">
      <el-form :model="user" :rules="rules">
        <el-form-item label="校友编号" :label-width="formLabelWidth" prop='userId'>
          <el-input v-model="user.userId" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友姓名" :label-width="formLabelWidth" prop='userName'>
          <el-input v-model="user.userName" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友性别" :label-width="formLabelWidth" prop='userSex'>
          <el-radio-group v-model="user.userSex" :readonly="readonly">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="校友生源地" :label-width="formLabelWidth" prop='userOrigin'>
          <el-input v-model="user.userOrigin" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友班级" :label-width="formLabelWidth" prop='userClassName'>
          <el-input v-model="user.userClassName" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友学部" :label-width="formLabelWidth" prop='userPartName'>
          <el-input v-model="user.userPartName" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友级别" :label-width="formLabelWidth" prop='userLevel'>
          <el-input v-model="user.userLevel" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="校友生日" :label-width="formLabelWidth" prop='userBirthday'>
          <el-date-picker v-model="user.userBirthday" :readonly="readonly"></el-date-picker>
          <!-- <el-input v-model="user.userBirthday" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop='userPhone'>
          <el-input v-model="user.userPhone" autocomplete="off" :readonly="readonly" type="number"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop='userEmail'>
          <el-input v-model="user.userEmail" autocomplete="off" :readonly="readonly"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="warning" @click="changeConfirm()" v-show="!readonly">修 改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getUserInfoById , updateUserInfo } from '../../api/userInfo.js'
  export default {
    components: 'Info',
    name: 'Info',
    props: {
      userId: String,
      show: {
        default: false,
        require: true
      }
    },
    data() {
      return {
        user: {},
        loading: false,
        dialogFormVisible: false,
        formLabelWidth: '100px',
        title: '查看校友信息',
        readonly: true,
        rules: {
          userId: [{
            required: true,
            message: '校友编号不得为空',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '校友姓名不得为空',
            trigger: 'blur'
          }],
          userSex: [{
            required: true,
            message: '校友性别不得为空',
            trigger: 'blur'
          }],
          userOrigin: [{
            required: true,
            message: '校友生源地不得为空',
            trigger: 'blur'
          }],
          userClassName: [{
            required: true,
            message: '校友班级名不得为空',
            trigger: 'blur'
          }],
          userPartName: [{
            required: true,
            message: '校友学部名不得为空',
            trigger: 'blur'
          }],
          userLevel: [{
            required: true,
            message: '校友级别不得为空',
            trigger: 'blur'
          }],
          userBirthday: [{
            required: true,
            message: '校友出生日期不得为空',
            trigger: 'blur'
          }],
          userPhone: [{
            required: true,
            message: '校友手机号不得为空',
            trigger: 'blur'
          }],
          userEmail: [{
              require: true,
              message: '邮箱不得为空',
              trigger: 'blur'
            },
            {
              type: 'email',
              message: '请填写正确的邮箱号',
              trigger: ['blur', 'change']
            }
          ]
        }
      }

    },
    create() {

    },
    methods: {

      showInfo(userId) {
        this.title = "查看校友信息"
        this.readonly = true
        this.fetchData(userId)
      },
      editInfo(userId) {
        this.title = "修改校友信息"
        this.readonly = false
        this.fetchData(userId)
      },
      fetchData(userId) {
        this.loading = true
        getUserInfoById(userId).then((data) => {
          this.user = data.obj
          console.log(data)
          console.log(this.user)
          this.loading = false
          this.dialogFormVisible = true
        })
        

      },
      changeConfirm(){
        this.$confirm('确定提交更改该校友的个人信息?').then(()=>{
          console.log("提交更改");
          console.log(this.user)
          console.log(this.user.userBirthday)
          console.log(this.user.userClassName)
          updateUserInfo(this.user.userBirthday,this.user.userClassName,this.user.userEmail,this.user.userId,this.user.userLevel,this.user.userName,this.user.userOrigin,this.user.userPartName,this.user.userPhone,this.user.userSex,this.user.userUpdateTime).then((data)=>{
            console.log(data)
            this.$message({
              showClose: true,
              message: '更改成功',
              type: 'success'
            })
          })
        })

      }
    },
    watch: {}

  }
</script>

<style scoped>

</style>
